import { IndexBar, List } from "antd-mobile";
import React from "react";
import city from "../../mock/cities.json";
import { useNavigate } from "react-router-dom";

const CityList = () => {
  const navigate = useNavigate();

  const handlOK = (city) => {
    localStorage.setItem("city", city);
    navigate(-1);
  };
  console.log(city.cityList);
  return (
    <div style={{ height: '100vh' }}>
      <IndexBar>
        {city.cityList.map((group) => {
          const { title, citys } = group;
          return (
            <IndexBar.Panel
              index={title}
              title={`${title}`}
              key={`${title}`}
            >
              <List>
                {citys.map((item, index) => (
                  <List.Item key={index} onClick={() => handlOK(item.name)}>
                    {item.name}
                  </List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          );
        })}
      </IndexBar>
    </div>
  );
};

export default CityList;
